<div style="display: flex; gap: 20px">
  <b-button class="top">从顶部弹出</b-button>
  <b-button class="right">从右边弹出</b-button>
  <b-button class="bottom">从底部弹出</b-button>
  <b-button class="left">从左边弹出</b-button>
</div>

<b-popup position="top">
  <div style="display: flex; align-items: center; flex-direction: column">
    <div>line 1</div>
    <div>line 2</div>
    <div>line 3</div>
    <div>line 4</div>
    <div>line 5</div>
    <div>line 6</div>
    <div>line 7</div>
    <div>line 8</div>
    <div>line 9</div>
    <div>line 10</div>
  </div>
</b-popup>

<b-popup position="right">
  <div style="display: flex; align-items: center; flex-direction: column">
    <div>line 1</div>
    <div>line 2</div>
    <div>line 3</div>
    <div>line 4</div>
    <div>line 5</div>
    <div>line 6</div>
    <div>line 7</div>
    <div>line 8</div>
    <div>line 9</div>
    <div>line 10</div>
  </div>
</b-popup>

<b-popup position="bottom">
  <div style="display: flex; align-items: center; flex-direction: column">
    <div>line 1</div>
    <div>line 2</div>
    <div>line 3</div>
    <div>line 4</div>
    <div>line 5</div>
    <div>line 6</div>
    <div>line 7</div>
    <div>line 8</div>
    <div>line 9</div>
    <div>line 10</div>
  </div>
</b-popup>

<b-popup position="left">
  <div style="display: flex; align-items: center; flex-direction: column">
    <div>line 1</div>
    <div>line 2</div>
    <div>line 3</div>
    <div>line 4</div>
    <div>line 5</div>
    <div>line 6</div>
    <div>line 7</div>
    <div>line 8</div>
    <div>line 9</div>
    <div>line 10</div>
  </div>
</b-popup>

<script>
  const topBtn = document.querySelector('.top');
  const topPopup = document.querySelector('b-popup[position="top"]');
  topBtn.addEventListener('click', () => {
    topPopup.open = true;
  });
  topPopup.addEventListener('close', () => {
    topPopup.open = false;
  });

  const rightBtn = document.querySelector('.right');
  const rightPopup = document.querySelector('b-popup[position="right"]');
  rightBtn.addEventListener('click', () => {
    rightPopup.open = true;
  });
  rightPopup.addEventListener('close', () => {
    rightPopup.open = false;
  });

  const bottomBtn = document.querySelector('.bottom');
  const bottomPopup = document.querySelector('b-popup[position="bottom"]');
  bottomBtn.addEventListener('click', () => {
    bottomPopup.open = true;
  });
  bottomPopup.addEventListener('close', () => {
    bottomPopup.open = false;
  });

  const leftBtn = document.querySelector('.left');
  const leftPopup = document.querySelector('b-popup[position="left"]');
  leftBtn.addEventListener('click', () => {
    leftPopup.open = true;
  });
  leftPopup.addEventListener('close', () => {
    leftPopup.open = false;
  });
</script>
